<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { getHotBookList, getBookList } from "../api/book";
import Header from './header.vue'
let bookDataList = [
  {
    cover:
      "https://p8.itc.cn/q_70/images01/20210413/db63c6995df14f49ac772129fe60b443.jpeg",
  },
  {
    cover:
      "https://p8.itc.cn/q_70/images01/20210413/db63c6995df14f49ac772129fe60b443.jpeg",
  },
  {
    cover:
      "https://p8.itc.cn/q_70/images01/20210413/db63c6995df14f49ac772129fe60b443.jpeg",
  },
];
// let books = [
//   {
//     id:1,
//     name:'111',
//     price:'111',
//     type:'111',
//     cover:
//       "https://p8.itc.cn/q_70/images01/20210413/db63c6995df14f49ac772129fe60b443.jpeg",
//   },
//   {
//     id:2,
//     name:'111',
//     price:'111',
//     type:'111',
//     cover:
//       "https://p8.itc.cn/q_70/images01/20210413/db63c6995df14f49ac772129fe60b443.jpeg",
//   },
//   {
//     id:3,
//     name:'111',
//     price:'111',
//     type:'111',
//     cover:
//       "https://p8.itc.cn/q_70/images01/20210413/db63c6995df14f49ac772129fe60b443.jpeg",
//   },
//   {
//     id:3,
//     name:'111',
//     price:'111',
//     type:'111',
//     cover:
//       "https://p8.itc.cn/q_70/images01/20210413/db63c6995df14f49ac772129fe60b443.jpeg",
//   },
// ];
const books=ref()
onMounted(()=>{
  getBookList().then((res)=>{
    books.value = res.data.list
   console.log('book',bookDataList);
   console.log(bookDataList);

})
})
const handleclick = (item:any)=>{
  console.log('item',item
  );
  
}
const addToCart = (item:any)=>{
  console.log('item',item
  );
  
}
const currentDate = ref(new Date())
// defineProps<{ msg: string }>()
const count = ref(0);
</script>
<template>
  <Header/>
  <div class="app_container">
    <div class="common-layout">
      <el-container>
        <el-container>
          <!-- <el-header class="header">Header123</el-header> -->
          <el-main class="main">
            <el-carousel :interval="4000" type="card" height="300px" class="carousel">
              <el-carousel-item v-for="item in bookDataList" :key="item" @click="handleclick(item)">
                <!-- <h3 text="2xl" justify="center">{{ item }}</h3> -->
                <!-- <img :src="item.cover" alt="" > -->
                <el-image
                  style="width: 100%; height: 300px"
                  :src="item.cover"
                />
              </el-carousel-item>
            </el-carousel>
            
<!-- 商品列表 -->
<div>书籍列表</div>
      <div class="book-container">
      <div v-for="book in books" :key="book.id" class="book-item">
        <div class="book-img">
          <img :src="book.cover">
        </div>
        <div class="book-info">
          <div class="book-name">{{ book.name }}</div>
          <div class="book-price">¥{{ book.price }}</div>
          <div class="book-type">{{ book.type }}</div>
        </div>
        <div class="book-btn">
          <el-button type="primary" @click="addToCart(book)">添加到购物车</el-button>
        </div>
      </div>
    </div>
          </el-main>
          <el-header class="footer" style="color: white">footer</el-header>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<style scoped>
/* .read-the-docs {
  color: #888;
} */
/* 手动配置全局样式 */
/* html,body{
  padding:  25px 25px;
} */
.app_container,
.el-container {
  padding: 0 25px;
  margin: 0;
  /* height: 100vh; */
}
/* 背景颜色 */
/* .aside {
  background-color: pink;
} */
.main {
  /* background-color: skyblue; */
}
.carousel{
  /* background-color: rgb(250, 229, 105); */
  /* border: #999 1px dotted; */
  border-top: rgb(250, 229, 105) 5px solid;
  border-bottom: rgb(250, 229, 105) 5px solid;
}
.header {
  background-color: aqua;
}
.footer {
  background-color: black;
}
/* 轮播区域 */
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}
.book-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px;
    border-top: #999 2px solid;
  }

  .book-item {
    width: 23%;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
  }

  .book-img {
    height: 200px;
    text-align: center;
    padding: 10px;
  }

  .book-img img {
    max-height: 100%;
    max-width: 100%;
  }

  .book-info {
    padding: 10px;
    text-align: center;
  }

  .book-name {
    font-size: 16px;
    margin-bottom: 10px;
  }

  .book-price {
    color: #f40;
    font-size: 18px;
    margin-bottom: 10px;
  }

  .book-type {
    font-size: 14px;
    color: #999;
  }

  .book-btn {
    text-align: center;
    padding: 10px;
  }
</style>
